<template>
  <div class="freight-manage">
    <el-card>
      <el-button type="primary" style="margin-bottom: 15px" @click="addBtn"
        >新增模板</el-button
      >
      <el-table
        :data="carriagesData"
        stripe
        style="width: 100%"
        border
        :header-cell-style="{ background: '#f8faff' }"
      >
        <el-table-column prop="templateType" label="模板类型" width="180">
        </el-table-column>
        <el-table-column prop="transportType" label="运送类型" width="180">
        </el-table-column>
        <el-table-column prop="associatedCityList" label="关联城市">
        </el-table-column>
        <el-table-column prop="firstWeight" label="首重"> </el-table-column>
        <el-table-column prop="continuousWeight" label="续重">
        </el-table-column>
        <el-table-column prop="lightThrowingCoefficient" label="轻抛系数">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="{ row }">
            <el-button type="text" style="color: #419eff">编辑</el-button>
            <el-button type="text" style="color: #f56c6c" @click="del(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      title="新增模板"
      :visible.sync="dialogVisible"
      width="40%"
      @close="close"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="FormDataRef"
        label-width="100px"
        style="padding-right: 30px"
      >
        <el-form-item label="模板类型" prop="templateType">
          <el-select
            v-model="formData.templateType"
            clearable
            placeholder="请选择模板类型"
            style="width: 100%"
          >
            <el-option label="同城寄" value="1"></el-option>
            <el-option label="省内寄" value="2"></el-option>
            <el-option label="经济区互寄" value="3"></el-option>
            <el-option label="跨省" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运输类型" prop="transportType">
          <el-select
            v-model="formData.transportType"
            clearable
            placeholder="请选择运送类型"
            style="width: 100%"
          >
            <el-option label="普快" value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市">
          <span>全国</span>
        </el-form-item>
        <!-- <el-form-item
          label="关联城市"
          v-if="!showCity"
          prop="associatedCityList"
        >
          <el-checkbox-group v-model="formData.associatedCityList">
            <el-checkbox label="2">京津冀</el-checkbox>
            <el-checkbox label="3">江浙沪</el-checkbox>
            <el-checkbox label="4">川渝</el-checkbox>
            <el-checkbox label="5">黑吉辽</el-checkbox>
          </el-checkbox-group>
        </el-form-item> -->
        <el-form-item label="首重价格" prop="firstWeight">
          <el-input v-model="formData.firstWeight"></el-input>
        </el-form-item>
        <el-form-item label="续重价格" prop="continuousWeight">
          <el-input v-model="formData.continuousWeight"></el-input>
        </el-form-item>
        <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
          <el-input v-model="formData.lightThrowingCoefficient"></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  carriagesDataApi,
  addCarriageApi,
  delCarriageApi,
} from "@/api/freight-manage";
const associatedCityListMap = {
  1: "全国",
  2: "京津冀",
  3: "江浙沪",
  4: "川渝",
  5: "黑吉辽",
};
const transportTypeMap = {
  1: "普快",
  2: "特快",
};
const templateTypeMap = {
  1: "同城寄",
  2: "省内寄",
  3: "经济区互寄",
  4: "跨省",
};
export default {
  data() {
    return {
      carriagesData: [],
      formData: {
        associatedCityList: [],
        continuousWeight: 0,
        firstWeight: 0,
        lightThrowingCoefficient: 0,
        templateType: "",
        transportType: "",
      },
      dialogVisible: false,
      rules: {
        templateType: [
          { required: true, message: "模板类型不能为空", trigger: "blur" },
        ],
        transportType: [
          { required: true, message: "运送类型不能为空", trigger: "blur" },
        ],
        associatedCityList: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        firstWeight: [
          { required: true, message: "首重价格不能为空", trigger: "blur" },
        ],
        continuousWeight: [
          { required: true, message: "续重价格不能为空", trigger: "blur" },
        ],
        lightThrowingCoefficient: [
          { required: true, message: "轻抛系数不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async getCarriagesData() {
      const { data } = await carriagesDataApi();
      console.log(data);
      this.carriagesData = data;
      this.carriagesData.forEach((item) => {
        item.transportType = transportTypeMap[item.transportType];
        item.templateType = templateTypeMap[item.templateType];
        item.associatedCityList =
          associatedCityListMap[item.associatedCityList];
      });
    },
    addBtn() {
      this.dialogVisible = true;
      this.showCity = true;
    },
    async submit() {
      await this.$refs.FormDataRef.validate();
      await addCarriageApi({
        ...this.formData,
        associatedCityList: this.associatedCityList,
      });
      this.getCarriagesData();
      this.close();
    },
    close() {
      this.dialogVisible = false;
      this.$refs.FormDataRef.resetFields();
    },
    async del(id) {
      await this.$confirm("确认删除吗？");
      await delCarriageApi(id);
      this.getCarriageData();
    },
  },
  // computed: {
  //   showTitle() {
  //     if (this.formData.id) {
  //       return "编辑模板";
  //     } else {
  //       return "新增模板";
  //     }
  //   },
  // },
  created() {
    this.getCarriagesData();
  },
};
</script>

<style></style>
